<template>
  <view class="search-tip-box">
    <view class="tip-title">{{title}}</view>
    <view class="tip-body">
      <view class="tip-item"
            v-for="(item,index) in data"
            @click="$emit('tip-item-click', item.keyword || '')"
            :key="index">
        <view class="iconfont iconsearch"></view>
        {{item.keyword}}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Array,
        default: () => []
      },
      title: {
        type: String,
        default: ''
      }
    }
  }
</script>

<style lang="scss"
       scoped>
  .search-tip-box {
    border-top: 1px #e4e4e4 solid;
    margin-top: 30rpx;
    font-size: 26rpx;
    padding: 30rpx;

    .tip-title {
      color: #4574a5;
    }

    .tip-body {
      padding-top: 30rpx;
      .tip-item {
        display: flex;
        line-height: 70rpx;
        color: #5d5d5d;
        
        .iconfont {
          color: #bdbdbd;
          margin-right: 20rpx;
          transform: translateY(2rpx);
        }
      }
    }
  }
</style>
